<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header"
        ><div class="old-return">
          <button class="btn merge">合并结算</button>
          <button class="btn export">导出报表</button>
        </div>
        <div class="search"
          ><el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="下单日期"
            end-placeholder="结单日期"
            :shortcuts="shortcuts"
            :size="size" /><el-select v-model="value" class="mr10" placeholder="请选择">
            <el-option v-for="item in options2" :value="item.value" /> </el-select
          ><el-select v-model="value" class="mr10" placeholder="请选择">
            <el-option v-for="item in options2" :value="item.value" /> </el-select
          ><el-select v-model="value" class="mr10" placeholder="请选择">
            <el-option v-for="item in options2" :value="item.value" /> </el-select
          ><el-select v-model="value" class="mr10" placeholder="请选择">
            <el-option v-for="item in options3" :value="item.value" />
          </el-select>
          <el-input v-model.trim="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select v-model="select" class="w100" placeholder="选择">
                <el-option class="center" label="工单编号" value="1" />
                <el-option class="center" label="工单编号" value="2" />
                <el-option class="center" label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template> </el-input></div
      ></div>
      <div class="main">
        <table class="table">
          <colgroup>
            <col width="60" />
            <col width="180" />
            <col width="150" />
            <col width="180" />
            <col width="110" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="80" />
            <col width="180" />
            <col width="100" />
          </colgroup>
          <thead
            ><tr>
              <th class="center"><input type="checkbox" /></th>
              <th>工单编号</th>
              <th>下单时间</th>
              <th>收付款编号</th>
              <th>结算时间</th>
              <th>产品品牌</th>
              <th>产品型号</th>
              <th>工单类型</th>
              <th>工单客服</th>
              <th>公司地址</th>
              <th>操作</th>
            </tr></thead
          >
          <tbody>
            <tr v-for="item in table">
              <td class="center"><input type="checkbox" /></td>
              <td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td
              ><td>{{ item.id }}</td>
              <td
                ><div class="btns">
                  <button class="btn settle">结算</button>
                  <button class="btn detail">详细</button>
                </div></td
              ></tr
            >
          </tbody>
          <tfoot>
            <tr
              ><td colspan="14" rowspan="1"
                ><div class="footer">
                  <el-pagination
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="200"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  /> </div></td
            ></tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.fundManager.feeReport,
  })

  const value = ref('')
  const value1 = ref('')
  const size = ref<'default' | 'large' | 'small'>('large')
  const input = ref('')
  const select = ref('')
  const background = ref(true)
  const handleSizeChange = (val: number) => {}
  const handleCurrentChange = (val: number) => {}
  const options = [
    {
      value: '全部类型',
    },
  ]
  const options2 = [
    {
      value: '全部品牌',
    },
  ]
  const options3 = [
    {
      value: '全部分类',
    },
  ]
  const options4 = [
    {
      value: '全部网点',
    },
  ]

  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '上 3 个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]

  const table = [
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
    {
      id: 666,
    },
  ]
</script>

<style scoped lang="scss">
  @import './index';
</style>
